import axios from '../lib/axios.js'; // 导入 Axios 库
import '../lib/jquery.js'; // 导入 jQuery 库

// 定义访问服务器时携带的参数
var params = {
    current: 1, // 当前页码
    pagesize: 12, // 每页显示的商品数量
    category: "", // 商品分类
    filter: "", // 筛选条件
    saleType: 10, // 销售类型
    sortType: "id", // 排序类型
    sortMethod: "ASC", // 排序方式
    search: "", // 搜索关键词
};

// 获取商品分类列表
axios.get("http://localhost:9000/goods/category")
    .then(res => {
        if (res.data.code === 1) {
            var $ul = $(".category"); // 获取分类列表的容器
            $ul.empty(); // 清空原有的分类列表

            // 遍历分类列表,并添加到容器中
            $.each(res.data.list, function (index, item) {
                var $li = $("<li>").text(item);
                if (index === 0) {
                    $li.addClass("active"); // 默认选中第一个分类
                }
                $ul.append($li);
            });
        } else {
            $('.error').css('display', 'block'); 
        }
    });

// 分类列表点击事件
$(".category").on("click", "li", function () {
    $(this).siblings().removeClass("active").end().addClass("active"); // 切换选中的分类
    params.category = $(this).text(); // 更新分类参数
    getList(); // 获取商品列表
});

// 销售类型点击事件
$(".saleBox li").on("click", function () {
    $(this).siblings().removeClass("active").end().addClass("active"); // 切换选中的销售类型
    var saleType = $(this).data("type");
    params.saleType = saleType; // 更新销售类型参数
    params.current = 1; // 重置当前页码
    getList(); // 获取商品列表
});

// 筛选条件点击事件
$(".filterBox li").on("click", function () {
    $(this).siblings().removeClass("active").end().addClass("active"); // 切换选中的筛选条件
    var filterType = $(this).data("type");
    params.filter = filterType; // 更新筛选条件参数
    params.current = 1; // 重置当前页码
    getList(); // 获取商品列表
});

// 排序条件点击事件
$(".sortBox li").on("click", function () {
    $(this).siblings().removeClass("active").end().addClass("active"); // 切换选中的排序条件
    var sortType = $(this).data("type");
    var sortOrder = $(this).data("method");
    params.sortType = sortType; // 更新排序类型参数
    params.sortMethod = sortOrder; // 更新排序方式参数
    params.current = 1; // 重置当前页码
    getList(); // 获取商品列表
});

// 搜索框失焦事件
$(".search").on("blur", function () {
    params.search = $(this).val(); // 更新搜索关键词参数
    params.current = 1; // 重置当前页码
    getList(); // 获取商品列表
});

// 跳转页码点击事件
$(".go").on("click", function () {
    var pagesize = parseInt($(".jump").val());
    if (!isNaN(pagesize)) {
        params.current = pagesize; // 更新当前页码参数
        getList(); // 获取商品列表
    }
});

// 每页显示数量改变事件
$(".pagesize").on("change", function () {
    params.pagesize = parseInt($(this).val()); // 更新每页显示数量参数
    params.current = 1; // 重置当前页码
    getList(); // 获取商品列表
});

// 获取商品列表的函数
function getList() {
    axios.get("http://localhost:9000/goods/list", {
        params // 将参数对象传递给 Axios 请求
    })
    .then(res => {
        if (res.data.code === 1) {
            const $listContainer = $(".list.container"); // 获取商品列表的容器
            $listContainer.empty(); // 清空原有的商品列表

            // 遍历商品列表,并添加到容器中
            res.data.list.forEach(product => {
                const $li = $("<li>", {
                    "data-id": product.goods_id
                });
                const $showDiv = $("<div>", {
                    class: "show"
                });
                $("<img>").attr("src", product.img_big_logo).appendTo($showDiv);
                if (product.is_hot) {
                    $("<span>", { class: "hot" }).text("热销").appendTo($showDiv);
                }
                if (product.is_sale) {
                    $("<span>").text("折扣").appendTo($showDiv);
                }
                const $infoDiv = $("<div>", { class: "info" });
                $("<p>", { class: "title" }).text(product.title).appendTo($infoDiv);

                $("<p>", { class: "price" })
                    .append(
                        $("<span>", { class: "curr" }).text(`¥ ${product.current_price}`)
                    )
                    .append($("<span>", { class: "old" }).text(`¥ ${product.price}`))
                    .appendTo($infoDiv);

                $li.append($showDiv).append($infoDiv).appendTo($listContainer);
            });
            $(".total").html(`${params.current}/${res.data.total}`); // 更新分页信息
        } else {
            // 显示错误信息
            $('.error').css('display', 'block');
        }
    })
    .catch(function (error) {
        // 处理错误
        alert('出现错误：' + error.message);
    });
}

// 初次加载商品列表
getList();

// 商品列表项点击事件
$(".list").on("click", "li", function () {
    var id = $(this).data("id");
    localStorage.setItem("goods_id", id); // 将商品 id 存储到 localStorage 中
    window.location.href = "./detail.html"; // 跳转到商品详情页
});
